<template>
  <div class="page">
    <s-header :name="'反馈详情'" :back="`/government/joint-review/transact/${pageId}`"></s-header>
    <div class="feedback">
      <div class="card-box">
        <div class="card-item">
          <div class="card-header">
            <div class="header-title">{{ dataForm.reviewDeptName }}反馈详情</div>
          </div>
          <div class="card-body">
            <span class="desc">{{ dataForm.handleTime }}</span>
          </div>
        </div>

        <div class="card-item">
          <div class="card-header">
            <div class="item-head">
              <div class="title">审查项</div>
            </div>
          </div>
          <van-divider />
          <div class="card-body">
            <div class="item-body" style="padding-top: 5px">
              <div v-for="(item, index) in reviewItems" :key="index" class="item-box">
                <div class="item-name">{{ item.itemName }}</div>
                <div class="item-id">{{ item.reviewResult }}</div>
                <van-divider />
              </div>
            </div>
          </div>
        </div>

        <div class="card-item">
          <div class="card-header">
            <div class="header-title title-required">到场人员</div>
          </div>
          <van-divider />
          <div class="card-body">
            <span>{{ dataForm.presentPerson }}</span>
          </div>
        </div>

        <div class="card-item last-item">
          <div class="card-header">
            <div class="item-head">
              <div class="title">相关材料</div>
            </div>
          </div>
          <van-divider />
          <div class="card-body">
            <div v-for="(item, index) in dataForm.attachInfoList" :key="index">
              <div class="file-item" @click="handleReview(item.url, item.suffix)">
                {{ item.name }}
                <span class="size" v-if="item.size">（{{ item.size }}）</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="btn-group">
        <van-button type="button" class="cus-btn btn-default" @click="handleBack">返回</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted, getCurrentInstance, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { ImagePreview } from 'vant'
import sHeader from '@/components/SimpleHeader'
import { jointReviewFeedbackDetail } from '@/service/govern'
export default {
  components: { sHeader },
  setup() {
    const route = useRoute()
    const router = useRouter()
    const store = useStore()
    const state = reactive({
      reviewItems: [],
      dataForm: {
        attachInfoList: [],
        applyStatusName: '',
        deptReviewResult: '',
        handleOpinions: '',
        handleTime: '',
        handleUserName: '',
        itemName: '',
        presentPerson: '',
        reviewDeptName: '',
        reviewResult: '',
      },
      pageId: route.query.pageId,
      pdfSrc: '', // pdf文件地址
      numPages: undefined,
    })

    // 全局属性
    const { listAssign, converSize } = getCurrentInstance().appContext.config.globalProperties
    store.dispatch('getFileServerPrefix')

    onMounted(async () => {
      const { applyBaseId, reviewDept } = route.query
      jointReviewFeedbackDetail({ applyBaseId: applyBaseId, reviewDept: reviewDept }).then((res) => {
        const data = res.data[0]
        listAssign(state.dataForm, data)
        if (data.attachInfoList && data.attachInfoList.length > 0) {
          data.attachInfoList.forEach((item) => {
            item.url = fileServerPrefix.value + item.url
            item.size = converSize(item.size)
          })
        }
        state.reviewItems = res.data.map((v) => {
          return { itemName: v.itemName, reviewResult: v.reviewResult }
        })
        state.dataForm.attachInfoList = data.attachInfoList || []
      })
    })

    const handleBack = () => {
      router.push({ path: `/government/joint-review/transact/${state.pageId}` })
    }

    const handleReview = (url, suffix) => {
      if (suffix === 'png' || suffix === 'jpg' || suffix === 'jpeg') {
        ImagePreview({
          images: [url],
          showIndex: true,
          showIndicators: true,
          closeable: true,
        })
      } else if (suffix === 'pdf') {
        window.open(url)
      } else {
        let a = document.createElement('a')
        a.href = url
        document.body.appendChild(a)
        a.click()
        document.body.removeChild(a)
      }
    }

    const fileServerPrefix = computed(() => {
      return store.state.fileServerPrefix
    })

    return {
      fileServerPrefix,
      ...toRefs(state),
      handleBack,
      handleReview,
    }
  },
}
</script>

<style lang="less" scoped>
@import '@/common/style/mixin';
.page {
  .feedback {
    padding-top: 15px;
    .desc {
      font-size: 13px;
      color: #9297ae;
    }
    .file-item {
      font-size: 13px;
      font-weight: 400;
      color: #3487f6;
      margin-bottom: 6px;
      .size {
        color: #9297ae;
      }
    }
    .item-box {
      font-size: 15px;
      font-weight: 400;
      margin-bottom: 10px;
      .item-name {
        color: #9297ae;
        margin-bottom: 5px;
      }
    }
    .btn-group {
      padding: 20px 0;
      .cus-btn {
        width: 100%;
      }
    }
  }
}
</style>
